<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {useTurnStore} from "@/stores/turn.ts";
import { watch } from 'vue';
import * as echarts from 'echarts';

const lineChart = ref<HTMLDivElement>();
const store = useTurnStore();

const getColor = () => {
 const x = Math.floor(Math.random() * 256);
 const y = Math.floor(Math.random() * 256);
 const z = Math.floor(Math.random() * 256);
  return `rgb(${x}, ${y}, ${z})`;
}

watch(store.provinceList, (newValue) => {
  const data = newValue;
  const seriesDate = [];
  data.forEach((item) => {
    seriesDate.push({
      name: item,
      type: 'bar',
      data: [150, 230, 224, 218, 135, 147, 260],
      color: getColor()
    });
  });
  const chart = echarts.init(lineChart.value);
  chart.setOption({
    legend: {
      data: data
    },
    xAxis: {
      type: "value"
    },
    yAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series: seriesDate
  });
});

onMounted(() => {
  const chart = echarts.init(lineChart.value);
  chart.setOption({
    xAxis: {
      type: "value"
    },
    yAxis: {
      type: 'category',
      data: ['民事案件', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
  });
  chart.on('click', (params) => {
    store.provinceEvent = {
      province: params.seriesName,
      event: params.name
    };
  });
});
</script>

<template>
  <div ref="lineChart" class="lineChart">

  </div>
</template>

<style scoped lang="scss">
.lineChart {
  width: 100%;
  height: 60%;
}
</style>
